<template>
  <div class="common-layout">
    <el-container class="el-container">

			<!-- 左侧导航栏 -->
      <el-aside class="el-aside" width="200px">
				<Aside></Aside>
			</el-aside>

			<!-- 右侧主体部分 -->
      <el-container>
        <el-header class="el-header" >
					<!-- header left name -->
					<div>用户:<b>{{headerForm.name  }}</b></div>
					<!-- header right buttom -->
					<div class="flex flex-wrap items-center">
						<el-dropdown @command="handleCommand">
							<div class="header-right">
								<img class="image02" :src="headerForm.imageSrc" alt="用户头像">
								<el-icon class="el-icon--right"><CaretBottom /></el-icon>
							</div>
						
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item command="info"><el-icon><View /></el-icon>基本资料</el-dropdown-item>
									<el-dropdown-item command="avatar"><el-icon><User /></el-icon>更换头像</el-dropdown-item>
									<el-dropdown-item command="resetpassword"><el-icon><Unlock /></el-icon>重置密码</el-dropdown-item>
									<el-dropdown-item command = "loginOut"><el-icon><DeleteFilled /></el-icon>退出登录</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>

				</el-header>
        <el-main>
					<router-view></router-view>
				</el-main>
        <el-footer class="el-footer">大事件@2024码农,在&nbsp;<mark>{{ headerForm.createTime }}</mark>&nbsp;您来到了大事件</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>

import { ref } from 'vue';
import {userInfo} from '@/Api/api.js';
import  Aside from "@/views/threeHome/Aside.vue";

//组合是api的路由使用
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

//控制退出登录和页面跳转
const handleCommand = (command) => {
	console.log(command)
	if(command === 'loginOut'){
		localStorage.removeItem("token")
		router.replace('/Login')
	}else{
		
		router.replace('/user/'+command)
	}
}

const headerForm = ref({
	name:'',
	imageSrc:''
})

//获取页面登录用户名和头像

const headerFrom = async ()=>{
	const {data:res} = await userInfo()
	headerForm.value.name = res.data.username
	headerForm.value.imageSrc = res.data.userImage
	headerForm.value.createTime = res.data.createTime
	
};
headerFrom()


</script>

<style lang="scss" scoped>


.common-layout{

	height: 100%;
	 .el-container{
		
		height:100%;
	}
	// .el-aside{
	// 	// background-color: #000;

	// }
	 .el-header{
		padding-right: 50px;
		color: black;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #e7f0e1;
		.image02{
			width:50px;
			height: 50px;
			border-radius: 50%;
			overflow: hidden;
			
			margin-right: 5px;
		}
		.header-right{
			
			display: flex;
			align-items: center;
		}
	}
	.el-footer{
		background-color: #a8abb2;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>